<%@ page contentType="text/html;charset=UTF-8"  language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图书馆首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/js.cookie.js"></script>
    <style>
        #login{
            height: 50%;
            width: 40%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5%;
            display: block;
            position: center;
        }
        button {
            border-color:#ebccd1;
            background-color:#ebcccc;
            color:black;
            border-style: hidden;
            border-radius: 10px;
            width: 100px;
            height: 31px;
            font-size: 16px;
            font-family:微软雅黑;
        }
        .logi{
            width: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 300px;
            font-size:22px;
        }

        .form-group {
            margin-bottom: 0;
        }
        * {padding:0;
            margin:0;
        }
        h3{
            font-size:42px;
            font-weight:bolder;
            font-family: 华文行楷;
            align:center;
            color: #034c50;
        }
    </style>
</head>
<body background="img/login背景.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<h2 style="text-align: center; color: cornflowerblue; font-family: '华文行楷'; font-size: 500%">图书管理系统</h2>

<div id="login">

    <div class="logi">

        <div>
            <div class="form-group">
                <div>
                    <h3>&nbsp&nbsp&nbsp登录</h3>
                </div>
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入您的账号">
            </div>
            <div class="form-group">
                <label for="passwd">密码</label>
                <input type="password" class="form-control" id="passwd" placeholder="请输入您的密码">
            </div>
            <div class="checkbox text-left">
                <label>
                    <input type="checkbox" id="remember">记住密码
                </label>
                <br>
                <br>
                <input type="radio" name="identity">管理员
                <input type="radio" name="identity" checked>读者
            </div>

            <p style="text-align: right;color: red;position: absolute" id="info"></p><br/>
            <button id="loginButton" >登 录
            </button>
            <a href="register" class="panel-title">还没有账号？请注册</a>
        </div>
    </div>
</div>
<script>

    // 记住登录信息
    function rememberLogin(username, password, checked) {
        Cookies.set('loginStatus', {
            username: username,
            password: password,
            remember: checked
        }, {expires: 30, path: ''})
    }
    // 若选择记住登录信息，则进入页面时设置登录信息
    function setLoginStatus() {
        var loginStatusText = Cookies.get('loginStatus')
        if (loginStatusText) {
            var loginStatus
            try {
                loginStatus = JSON.parse(loginStatusText);
                $('#username').val(loginStatus.username);
                $('#passwd').val(loginStatus.password);
                $("#remember").prop('checked',true);
            } catch (__) {}
        }
    }

    // 设置登录信息
    setLoginStatus();
    $("#loginButton").click(function () {
        var username =$("#username").val();
        var passwd=$("#passwd").val();
        var remember=$("#remember").prop('checked');
        if (username == '') {
            $("#info").text("提示:账号不能为空");
        }
        else if( passwd ==''){
            $("#info").text("提示:密码不能为空");
        }

        else {

            $.ajax({
                type: "POST",
                url: "loginCheck",
                data: {
                    username:username,
                    passwd: passwd
                },
                dataType: "json",
                success: function(data) {
                    if (data.stateCode.trim() === "0") {
                        alert("提示:账号或密码错误！");
                    } else if (data.stateCode.trim() === "1") {
                        alert("提示:登陆成功，跳转中...");
                        window.parent.location.href = "admin_books.html";

                    } else if (data.stateCode.trim() === "2") {
                        if(remember){
                            rememberLogin(username,passwd,remember);
                        }else {
                            Cookies.remove('loginStatus');
                        }
                        alert("提示:登陆成功，跳转中...");
                        window.parent.location.href = "reader_books.html";

                    }
                }
            });
        }
    })

</script>
</div>

</body>
</html>

    